<template>
  <div class="PipeStickingMachine_Box">
    <div class="PipeStickingMachine_titleBox">
      <div class="titleBox1_l">
        <div class="Title_icon"></div>
        <span class="public_Text">贴管机</span>
      </div>
      <div class="titleBox1_r" @click="addClose"></div>
    </div>
    <div class="PipeStickingMachine_Box1">
      <div class="hw_Box">
        <div class="hw_lBox">
          <div class="hw_icon"></div>
          <span class="hwSpan">设备状态</span>
        </div>
        <div class="hw_wuyangshi">{{zhuangtai}}</div>
        <!-- <div class="hw_RboxZaixian">在线</div>
        <div class="hw_RboxLixian">离线</div>
        <div class="hw_RboxGuzhang">故障</div> -->
      </div>
    </div>
    <!-- <div class="PipeStickingMachine_Box2">
      <div class="hw_Box">
        <div class="hw_lBox">
          <div class="hw_icon1"></div>
          <span class="hwSpan">贴管数量 (今日)</span>
        </div>
        <div class="hw_RboxTitle">0000个</div>
      </div>
    </div> -->
    <div class="PipeStickingMachine_Box4">测量记录</div>
    <div class="PipeStickingMachine_contenBox">
      <div class="PipeStickingMachine_contenItem" v-for="(item,index) in tieguanList" :key="index">
        <div class="contenItem_top">
          <div class="Top_Left">
            <div class="Top_LeftIcon">
              <span class="chuangSpan">{{item?.CWH}}床</span>
            </div>
            <span class="nameSpan">{{item?.NAME}}</span>
          </div>
          <div class="Top_R">时间: {{item?.LOG_TIME}}</div>
        </div>
        <div class="contenItem_bom">
          <div class="BomItem">项目: {{item?.ITEMNAME}}</div>
          <!-- <div class="BomItem">报告类型: {{item.REPORTTYPE}}</div> -->
          <!-- <div class="BomItem">血压: 118/76mmHg</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from "vue"
  import { postdatacenterdbapiapi, postgjstatusapi } from "@/api/index.js"
  const emit = defineEmits(["clsoePipeStickingMachine"])
  const addClose = () => {
    emit("clsoePipeStickingMachine")
  }
  const props = defineProps({
    TieguanObj: {
      type: Object,
      default: true
    }
  })
  const tieguanList = ref([])
  const zhuangtai = ref("")
  const init = async (data) => {
    console.log(data.DevicesId);
    let TijiaoObj = {
      apiid: "tube_service_list",
      token: "tube_service_list",
      appid: "贴管机任务列表",
      apptype: "trans",
      ip: data.DevicesId
    }
    const res = await postdatacenterdbapiapi(TijiaoObj)
    // console.log(res,'获取到了贴关机的数据');
    tieguanList.value = JSON.parse(res.data.data)
    console.log(tieguanList.value,'贴管机数据结构');
 
    const res2 = await postgjstatusapi(data.DevicesId)
    console.log(res2.data.data.status,'获取贴管机的状态');
    zhuangtai.value = res2.data.data.status

  }
  watch(
    () => props.TieguanObj,
    val => {
      console.log(val, '监听到贴管机的消息');
      init(val)
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .PipeStickingMachine_Box {
    width: 100%;
    height: 100%;
    background: url("@/assets/accesscontrol/changbeijing.png") no-repeat center;
    background-size: 100% 100%;

    .PipeStickingMachine_titleBox {
      width: 808px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translate(-50%, 0);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .titleBox1_l {
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;

        .Title_icon {
          margin-left: 20px;
          width: 50px;
          height: 50px;
          background: url("@/assets/accesscontrol/tieguan.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 20px;
        }
      }

      .titleBox1_r {
        cursor: pointer;
        width: 80px;
        height: 80px;
        background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .PipeStickingMachine_Box1 {
      width: 808px;
      height: 96px;
      position: absolute;
      left: 50%;
      top: 115px;
      transform: translate(-50%, 0);
      border-radius: 20px;
      background: linear-gradient(180deg,
          rgba(225, 242, 255, 0.6) 0%,
          rgba(158, 213, 255, 0.6) 100%);
      display: flex;
      align-items: center;
    }

    .PipeStickingMachine_Box2 {
      width: 808px;
      height: 96px;
      position: absolute;
      left: 50%;
      top: 235px;
      transform: translate(-50%, 0);
      border-radius: 20px;
      background: linear-gradient(180deg,
          rgba(225, 242, 255, 0.6) 0%,
          rgba(158, 213, 255, 0.6) 100%);
      display: flex;
      align-items: center;
    }

    .PipeStickingMachine_Box3 {
      width: 808px;
      height: 96px;
      position: absolute;
      left: 50%;
      top: 355px;
      transform: translate(-50%, 0);
      border-radius: 20px;
      background: linear-gradient(180deg,
          rgba(225, 242, 255, 0.6) 0%,
          rgba(158, 213, 255, 0.6) 100%);
      display: flex;
      align-items: center;
    }

    .PipeStickingMachine_Box4 {
      width: 808px;
      height: 40px;
      position: absolute;
      left: 50%;
      top: 220px;
      transform: translate(-50%, 0);
      font-size: 36px;
      font-weight: 600;
      color: #000;
      /* background-color: red; */
    }

    .PipeStickingMachine_contenBox {
      width: 808px;
      height: 1140px;
      position: absolute;
      left: 50%;
      top: 280px;
      transform: translate(-50%, 0);
      overflow-y: scroll;

      .PipeStickingMachine_contenItem {
        margin-bottom: 16px;
        width: 808px;
        height: 128px;
        border-radius: 16px;
        border: 2px solid #8da3bc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 36px;
        position: relative;

        .contenItem_top {
          width: 95%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .Top_Left {
            width: 50%;
            height: 50px;
            display: flex;
            align-items: center;

            .Top_LeftIcon {
              width: 93px;
              height: 50px;
              background-color: pink;
              background: url("@/assets/PatientInformation/chuanghao.png") no-repeat center;
              background-size: 100% 100%;
              text-align: center;

              .chuangSpan {
                line-height: 50px;
                font-size: 30px;
                font-weight: 600;
                background: linear-gradient(180deg, #fff 0%, #bef2ff 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            .nameSpan {
              margin-left: 15px;
              color: #000;
              text-align: center;
              font-family: "PingFang SC";
              font-size: 30px;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
            }
          }

          .Top_R {
            text-align: right;
            width: 100%;
            color: #000;
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }

        .contenItem_bom {
          width: 95%;
          height: 42px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 30px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }

    .hw_Box {
      width: 90%;
      height: 72px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .hw_lBox {
        display: flex;
        align-items: center;

        .hw_icon {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/yiliaoxiang.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hw_icon1 {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/dadiaoche.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hw_icon2 {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/xueya.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hwSpan {
          margin-left: 20px;
          font-size: 30px;
          color: #000;
        }
      }

      .hw_RboxTitle {
        color: #000;
        font-size: 30px;
        font-weight: 600;
      }

      .hw_wuyangshi {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        /* border: 1px solid #00e7bd; */
        /* background: rgba(255, 255, 255, 0.5); */
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        /* color: #00d889; */
      }

      .hw_RboxZaixian {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #00e7bd;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #00d889;
      }

      .hw_RboxLixian {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #9ea2a7;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #72787b;
      }

      .hw_RboxGuzhang {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #ff5e00;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #ff5900;
      }
    }
  }
</style>